<template>
  <div id="app">
    <Home v-if="isLanguageLoaded"></Home>
  </div>
</template>
<script>
import Home from "@/views/home/index.vue";
import { mapState, mapActions } from "vuex";
import { flattenTranslations } from "@/i18n";
export default {
  components: {
    Home,
  },
  data() {
    return {
      isLanguageLoaded: false,
    };
  },
  computed: {
    ...mapState("language", ["currentLang", "langConfig"]),
  },
  methods: {
    ...mapActions("language", ["setLangConfig", "setTranslations"]),
    async initLanguage() {
      try {
        // 通过后面的配置读取语言包
        const config = await this.$getJson("./json/language.txt", "language");
        let fallbackConfig = config;

        // 懒加载中文语言包作为备用
        if (!config) {
          const { default: zh_CN } = await import("@/i18n/zh_CN");
          fallbackConfig = zh_CN;
        }
        const flatTranslations = flattenTranslations(fallbackConfig);
        this.setTranslations(flatTranslations);
      } finally {
        this.isLanguageLoaded = true;
      }
    },
  },
  async created() {
    await this.initLanguage();
  },
};
</script>
<style>
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 16px;
}

.loading-text {
  font-size: 16px;
  color: #666;
}
</style>
